import React from 'react';
import { RouteObject } from 'react-router-dom';
import App from '../index'
import lazyload from '../../fns/lazyload';
import Home from '../pages/home';
import Exemples from '../pages/exemples';
import CompCards from '../pages/compCards';
import QuickStart from '../pages/quickStart';
import About from '../pages/about';

const exemples = import.meta.glob('../exemples/*/index.tsx')

export const exemplesNameList: { path: string, name: string }[] = Object.keys(exemples).map(key => {
  const keyArr = key.split('/')
  const path = `/${keyArr[1]}/${keyArr[2]}`
  return {
    path,
    name: keyArr[2]
  }
})

export const routes: RouteObject[] = [
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: '',
        element: <Home />,
      },
      {
        path: '/home',
        element: <Home />,
      },
      {
        path: '/compCards',
        element: <CompCards />,
      },
      {
        path: '/quickStart',
        element: <QuickStart />,
      },
      {
        path: '/about',
        element: <About />,
      },
      {
        path: '/exemples',
        element: <Exemples />,
        children: [
          {
            path: '',
            element: <CompCards />,
          },
          ...Object.keys(exemples).map(key => {
            const Exemple = lazyload(exemples[key])
            const keyArr = key.split('/')
            const path = `/${keyArr[1]}/${keyArr[2]}`
            return {
              path,
              element: <Exemple />,
            }
          })
        ]
      },
    ]
  },
];
